<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>3D Minimap</title>


  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
  <link rel="stylesheet" href="../node_modules/leaflet/dist/leaflet.css" />
  <style>
  #map,body,html{
    height:100%;
    width:100%;
    margin:0;
  }

  </style>
</head>

<body>
  <div id="map"></div>
  <script src="../node_modules/d3/d3.min.js"></script>
  <script src="../node_modules/topojson-client/dist/topojson-client.min.js"></script>
  <script src="../node_modules/leaflet/dist/leaflet.js"></script>
  <script src="../src/Control.GlobeMiniMap.js"></script>
  <script>
    var layer = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
    });

    var map = L.map('map', {
        scrollWheelZoom: false,
        center: [0, 0],
        zoom: 2
    });

    map.addLayer(layer);

    var miniMap = new L.Control.GlobeMiniMap({
      //uncomment to assign colors
      // land:'#FFFF00',
      // water:'#3333FF',
      // marker:'#000000'
      topojsonSrc : '../src/world.json'
    }).addTo(map);

  </script>
</body>
</html>